<template>
  <div class="search-box">
    <i class="iconfont icon-search"></i>
    <div class="input-wrapper" v-if="ifFakeInput">
      <input
        class="input-text"
        type="text"
        :placeholder="text"
        v-model="query">
    </div>
    <div class="input-wrapper" v-else></div>
    <i class="iconfont icon-clear"
      @click="clear"
      v-if="ifClearShow"></i>

  </div>
</template>
<script>
import { debounce } from '@/assets/js/util'
export default {
  name: 'meSearchBox',
  data () {
    return {
      query: ''
    }
  },
  computed: {
    ifClearShow () {
      return this.query !== ''
    }
  },
  watch: {
    query: debounce(function () {
      this.$emit('query', this.query)
      console.log(this.query)
    })// 搜索词发生变随即调用querytext方法
  },
  methods: {
    clear () { // 搜索内容清空，清空图标消失
      this.query = ''
    }
  },
  props: {
    ifFakeInput: {
      type: Boolean,
      default: true
    },
    text: String
  }
}
</script>
<style lang="stylus" scoped>
.search-box
  width 100%
  height 30px
  display flex
  position relative
  padding-left 26px
  padding-right 15px
  background-color #fff
  border-radius 15px
  align-items center
  .icon-search
    position absolute
    left 5px
    top 5px
    font-size 20px
    color #ccc
  .input-wrapper
    flex 1
    .input-text
      width 100%
      font-size 16px
</style>
